<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <ul v-show="title !== '美食'">
      <li v-for="(item, index) in listData" :key="index">item</li>
    </ul>
    <!-- 标签之间的元素存放的地方 默认插槽 -->
    <slot>这里存放默认值，当使用者没有传递具体的结构时，默认显示这里的数据 </slot>
    <!-- 具名插槽 -->
    <slot name="slot1">这里存放默认值，当使用者没有传递具体的结构时，默认显示这里的数据 </slot>
    <slot name="slot2">这里存放默认值，当使用者没有传递具体的结构时，默认显示这里的数据 </slot>

    <!-- 作用域插槽  把games传给插槽的使用者-->
    <slot :games="games"></slot>

    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!--   -->
        <router-link :to="{
          path: '/home/news/detail',
          query: {
            id: item.id,
            title: item.title,
          }
        }">
          {{item.title}}
        </router-link>
        <keep-alive include="component1">
          <router-view></router-view>
        </keep-alive>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["id","title"],
  // props: ['listData','title'],
  data() {
    return {
      games: ["红色警戒", "穿越火线"],
    };
  },
  methods: {
    method1(){
      this.$router.push({
        name: 'about',
        params: {
          id: '001',
          title: 'title'
        }
      })
    }
  }
};
</script>

<style>
</style>